<template>
  <div class="main_func" id="func_boxa">
    <div class="func_lista">
      <div class="map_list">
        <div class="img_map_box" @click="openList" data-manage="JCGL">
          <img src="@/assets/images/WXJL.png" alt="" />
          <div class="map_active" v-show="JCGL_flag">
            <img src="@/assets/images/input-checked.png" alt="" />
          </div>
          <div>检测</div>
        </div>
        <div class="img_map_box" @click="openList" data-manage="XFGL">
          <img src="@/assets/images/XFGL.png" alt="" />
          <div class="map_active" v-show="XFGL_flag">
            <img src="@/assets/images/input-checked.png" alt="" />
          </div>
          <div>修复</div>
        </div>
        <div class="img_map_box" @click="openList" data-manage="KJCX">
          <img src="@/assets/images/KJCX.png" alt="" />
          <div class="map_active" v-show="KJCX_flag">
            <img src="@/assets/images/input-checked.png" alt="" />
          </div>
          <div>拉框</div>
        </div>
      </div>
      <!-- 检测管理 -->
      <div class="vxe_box">
        <vxe-modal
          :mask="false"
          :marginSize="-500"
          :lock-view="false"
          v-model="demo1.value5"
          width="1150"
          height="990"
          :position="{ top: 55, left: 1 }"
        >
          <template #title>
            <div class="JC_title">
              <span style="color: white">检测管理</span>
              <i
                class="foldable_btn vxe-icon-arrow-up"
                @click="tableFoldable"
              ></i>
            </div>
          </template>

          <template #default>
            <div class="first_line">
              <div>
                <span>开始时间:</span>
                <input
                  @focus="addSdefault"
                  @blur="addStart"
                  id="start_time_choose"
                  type="date"
                  name="start_time"
                  value=""
                />
              </div>
              <div>
                <span>结束时间:</span>
                <input
                  @blur="addEnd"
                  id="end_time_choose"
                  type="date"
                  name="end_time"
                  value=""
                />
              </div>
              <div class="XF_second">
                <span>要素编码查询:</span>
                <vxe-input
                  clearable
                  v-model="demo1.value300"
                  placeholder="请完整输入"
                  type="search"
                  @search-click="searchID"
                ></vxe-input>
              </div>
            </div>
            <div class="second_line">
              <div>缺陷等级:</div>
              <div>
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >
                  全选
                </el-checkbox>
              </div>
              <div>
                <el-checkbox-group
                  v-model="checkedCities"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox v-for="city in cities" :key="city" :label="city">
                    {{ city }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="third_line">
              <span class="third_line_a">是否显示图层:</span>
              <div class="el-span">
                <el-switch v-model="value1" @change="switchMap" />
              </div>

              <input type="button" value="查询" @click="getInfo" />
              <el-progress
                :percentage="percentage"
                color="#409eff"
                class="jdt_nr"
                v-show="jdt"
              ></el-progress>
            </div>
            <div class="baffle"></div>
            <vxe-table
              stripe
              show-overflow
              :loading="loadingJC"
              height="700"
              :sync-resize="demo1.value5"
              :data="tableData"
              :row-config="{ isCurrent: true, isHover: true }"
              @current-change="handleRowClick"
              ref="xTable"
            >
              <vxe-column
                field="detectionTarget"
                title="检测对象"
                width="150"
              ></vxe-column>
              <vxe-column
                field="defectType"
                title="缺陷类型"
                width="150"
              ></vxe-column>
              <vxe-column
                field="defectPosition"
                title="缺陷位置"
                width="150"
              ></vxe-column>
              <vxe-column
                field="defectLevel"
                title="缺陷等级"
                width="100"
              ></vxe-column>
              <vxe-column
                field="pipeSegmentMaterial"
                title="管网材质"
                width="150"
              ></vxe-column>
              <vxe-column
                field="​pavementType"
                title="路面类型"
                width="100"
              ></vxe-column>

              <vxe-column
                field="testingAddress"
                title="道路名称"
                width="150"
              ></vxe-column>
              <vxe-column
                field="testingCompany"
                title="检测部门"
                width="150"
              ></vxe-column>
              <vxe-column
                field="testingDate"
                title="检测时间"
                width="150"
              ></vxe-column>

              <vxe-column
                field="testingName"
                title="检测人员"
                width="150"
              ></vxe-column>
              <vxe-column
                field="testingReport"
                title="检测报告"
                width="150"
              ></vxe-column>
              <vxe-column field="remarks" title="备注" width="150"></vxe-column>
            </vxe-table>
            <vxe-pager
              :align="center"
              :size="mini"
              background
              :current-page="tablePage.currentPage"
              :page-size="tablePage.pageSize"
              :total="tablePage.totalResult"
              :layouts="[
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'FullJump',
                'Total',
              ]"
              @page-change="handlePageChange"
            ></vxe-pager>

            <vxe-button content="检测图片" @click="openPic"></vxe-button>
            <vxe-button content="检测报告" @click="openReport"></vxe-button>
            <vxe-button content="检测视频" @click="openVideo"></vxe-button>
          </template>
        </vxe-modal>
      </div>
      <div class="picPop">
        <vxe-modal
          :mask="false"
          :lock-view="false"
          v-model="demo1.value6"
          width="650"
          height="500"
        >
          <template #title>
            <div style="font-size: 22px">图片</div>
          </template>
          <template #default>
            <div class="guild_img_box">
              <div v-show="single">
                <img v-viewer :src="testPhotoUrl" alt="" />
              </div>
              <div v-show="poly" class="poly">
                <el-carousel>
                  <el-carousel-item v-for="item in images" :key="item.id">
                    <img :src="item.originalUrl + item.pic" class="bannerimg" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </template>
        </vxe-modal>
        <vxe-modal
          :mask="false"
          :lock-view="false"
          v-model="demo1.value7"
          width="1000"
          height="600"
        >
          <template #title>
            <div style="font-size: 22px">报告</div>
          </template>
          <template #default>
            <div class="testReport">
              <iframe :src="testReportUrl" width="100%" height="100%">
                该浏览器无法支持PDF,请点击查看：
                <a :href="testReportUrl">下载 PDF</a>
              </iframe>
            </div>
          </template>
        </vxe-modal>
        <vxe-modal
          :mask="false"
          :lock-view="false"
          v-model="demo1.value8"
          width="1000"
          height="600"
        >
          <template #title>
            <div>
              <span style="margin-right: 25px; margin-left: 15px">视频</span>
              <!-- 下拉菜单 -->
              <el-select
                v-model="movieValue"
                class="m-2"
                placeholder="下拉视频"
                @change="movieChange"
              >
                <el-option
                  v-for="item in movieOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </template>
          <template #default>
            <div style="width: 900px; height: 500px">
              <embed width="100%" height="100%" :src="testVideoUrl" />
            </div>
          </template>
        </vxe-modal>
      </div>
      <!-- 修复管理 -->
      <div class="vxe_box">
        <vxe-modal
          :mask="false"
          :marginSize="-500"
          :lock-view="false"
          v-model="demo1.value9"
          width="1150"
          height="990"
          :position="{ top: 55, left: 1 }"
        >
          <template #title>
            <div class=".JC_title">
              <span style="color: white; font-size: 20px">修复管理</span>
              <i
                class="foldable_btn vxe-icon-arrow-up"
                @click="tableFoldable"
              ></i>
            </div>
          </template>

          <template #default>
            <div class="XF_first_line" style="font-size: 18px">
              <span class="XF_first_line_a">要素编码查询:</span>
              <div class="XF_second_line">
                <div class="XF_second">
                  <vxe-input
                    clearable
                    v-model="demo1.value400"
                    placeholder="请输入完整编码"
                    type="search"
                    @search-click="searchIDXF"
                  ></vxe-input>
                </div>
              </div>

              <span>是否显示图层:</span>
              <div class="XF_second_line">
                <el-switch v-model="value2" @change="switchMapXF" />
              </div>

              <input type="button" value="查询" @click="getInfoXF" />
              <div class="progress">
                <el-progress
                  :percentage="percentage"
                  color="#409eff"
                  class="jdt_nr"
                  v-show="jdt"
                ></el-progress>
              </div>
            </div>
            <div class="baffle"></div>
            <vxe-table
              stripe
              show-overflow
              height="840"
              :loading="loading"
              :sync-resize="demo1.value9"
              :data="tableDataXF"
              :row-config="{ isCurrent: true, isHover: true }"
              @current-change="handleRowClick"
              ref="xTable"
            >
              <vxe-column
                field="handleTarget"
                title="处理对象"
                width="150"
              ></vxe-column>
              <vxe-column
                field="handleType"
                title="处理类型"
                width="150"
              ></vxe-column>
              <vxe-column
                field="defectName"
                title="缺陷名称"
                width="150"
              ></vxe-column>
              <vxe-column
                field="defectPosition"
                title="缺陷位置"
                width="150"
              ></vxe-column>
              <vxe-column
                field="defectLevel"
                title="缺陷级别"
                width="100"
              ></vxe-column>
              <vxe-column
                field="handleTime"
                title="处理日期"
                width="150"
              ></vxe-column>
              <vxe-column
                field="handleLength"
                title="处理长度"
                width="100"
              ></vxe-column>
              <vxe-column
                field="pipeSection"
                title="管段长度"
                width="150"
              ></vxe-column>
              <vxe-column
                field="handleMode"
                title="处理方式"
                width="150"
              ></vxe-column>
              <vxe-column
                field="handleContent"
                title="处理内容"
                width="150"
              ></vxe-column>

              <vxe-column
                field="handleCompany"
                title="处理单位"
                width="150"
              ></vxe-column>
              <vxe-column
                field="location"
                title="所在位置"
                width="150"
              ></vxe-column>
              <vxe-column
                field="districtTown"
                title="所属区镇"
                width="150"
              ></vxe-column>
              <vxe-column
                field="type"
                title="归属类型"
                width="150"
              ></vxe-column>
            </vxe-table>
            <div style="margin-top: 10px">
              <vxe-button content="修复图片" @click="openPicXF"></vxe-button>
              <vxe-button content="修复报告" @click="openReportXF"></vxe-button>
              <vxe-button content="修复视频" @click="openVideoXF"></vxe-button>
            </div>
          </template>
        </vxe-modal>
      </div>
      <div class="picPop">
        <vxe-modal
          :mask="false"
          :lock-view="false"
          v-model="demo1.value12"
          width="650"
          height="500"
        >
          <template #title>
            <div>图片</div>
          </template>
          <template #default>
            <div class="guild_img_box">
              <div v-show="single">
                <img v-viewer :src="testPhotoUrl" alt="" />
              </div>
              <div v-show="poly" class="poly">
                <el-carousel>
                  <el-carousel-item v-for="item in images" :key="item.id">
                    <img :src="item.originalUrl + item.pic" class="bannerimg" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </template>
        </vxe-modal>
        <vxe-modal
          :mask="false"
          :lock-view="false"
          v-model="demo1.value11"
          width="1000"
          height="600"
        >
          <template #title>
            <div style="font-size: 22px">报告</div>
          </template>
          <template #default>
            <div class="testReport">
              <iframe :src="testReportUrl" width="100%" height="100%">
                该浏览器无法支持PDF,请点击查看：
                <a :href="testReportUrl">下载 PDF</a>
              </iframe>
            </div>
          </template>
        </vxe-modal>
        <vxe-modal
          :mask="false"
          :lock-view="false"
          v-model="demo1.value10"
          width="1000"
          height="600"
        >
          <template #title>
            <div>
              <span style="margin-right: 25px; margin-left: 15px">视频</span>
              <!-- 下拉菜单 -->
              <el-select
                v-model="movieValue"
                class="m-2"
                placeholder="下拉视频"
                @change="movieChange"
              >
                <el-option
                  v-for="item in movieOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </template>
          <template #default>
            <div style="width: 900px; height: 500px">
              <embed width="100%" height="100%" :src="testVideoUrl" />
            </div>
          </template>
        </vxe-modal>
      </div>
      <!-- 空间查询 -->
      <div class="vxe_box">
        <vxe-modal
          :mask="false"
          :marginSize="-500"
          :lock-view="false"
          v-model="demo3.value1"
          width="1150"
          height="990"
          :position="{ top: 55, left: 1 }"
        >
          <template #title>
            <span style="color: white">空间查询</span>
          </template>
          <template #default>
            <el-select
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
              @change="drawChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button type="primary" @click="delSearch">清空交互</el-button>
            <el-button type="primary" @click="submitSearch">查询</el-button>
            <el-container>
              <el-aside width="220px">
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                />
              </el-aside>
              <el-main width="1000px">
                <el-tabs type="border-card">
                  <el-tab-pane label="详细信息">
                    <el-table :data="tableDataXX" style="width: 100%">
                      <el-table-column prop="date" label="名称" width="180" />
                      <el-table-column prop="name" label="值" width="180" />
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="统计信息">
                    <el-table :data="tableDataTJXX" style="width: 100%">
                      <el-table-column
                        prop="type"
                        label="类别名称"
                        width="180"
                      />
                      <el-table-column prop="count" label="合计" width="180" />
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="统计图">
                    <div
                      id="myChart123"
                      :style="{ width: '750px', height: '700px' }"
                    ></div>
                  </el-tab-pane>
                </el-tabs>
              </el-main>
            </el-container>
          </template>
        </vxe-modal>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import { onMounted, ref, toRaw, defineComponent, reactive, watch } from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import {
  getJCGLInfo,
  getJCGLSearch,
  getJCWhole,
  getXFSearch,
  getXFInfo,
  getSpatialInfo,
  getPipePointInfo,
  getPipeInfo,
} from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
//测试用菠萝存储地图容器
import { userMap } from '../../../../store/index'
let map = userMap() //接收
let list
// 空间查询图层--绘制
let drawLayerSearch
let drawSourceSearch
let drawFeatureSearch
let drawSearch
// 空间查询树控件飞行图层-点
let treePiontLayer
let treePiontSource
let treePiontFeature
// 空间查询树控件飞行图层-线
let treeLineLayer
let treeLineSource
let treeLineFeature
// 单线起点
let PipeXsource
let PipeXLayer
let PipeXFeature
// 单线终点
let PipeYsource
let PipeYLayer
let PipeYFeature
// 单线缓冲区
let PipeLinesource
let PipeLineLayer
let PipeLineFeature
// 时间内全部管线
let Pipesource
let PipeLayer
let PipeFeature
// 控制选中信息
const JCGL_flag = ref(false)
const XFGL_flag = ref(false)
const KJCX_flag = ref(false)
// 控制弹窗信息
const tableData = ref([])
const tableDataXF = ref([])
// 检测进度条
const loadingJC = ref(false)
// 修复进度条
const loading = ref(true)
// input时间信息
const start_time_choose = ref()
const end_time_choose = ref()
const demo1 = reactive({
  // 检测管理
  value5: false,
  value6: false,
  value7: false,
  value8: false,
  value300: '',
  // 修复管理
  value9: false, //弹窗与表单
  value10: false, //视频
  value11: false, //报告
  value12: false, //图片
  value400: '', //input框
})
// 检测管理分页
const tablePage = reactive({
  currentPage: 1,
  pageSize: 13,
  totalResult: 0,
})
// 缺陷等级
const defectLevel = ref("'1','2','3','4'")
// 多选框信息
const checkAll = ref(true)
const isIndeterminate = ref(true)
const checkedCities = ref(['1级', '2级', '3级', '4级'])
const cities = ['1级', '2级', '3级', '4级']

onMounted(() => {
  list = toRaw(map.map)
  // 空间查询图层--绘制
  drawSourceSearch = new VectorSource({
    wrapX: false,
  })
  drawLayerSearch = new VectorLayer({
    source: drawSourceSearch,
    style: {
      'fill-color': 'rgba(255, 255, 255, 0.2)',
      'stroke-color': '#ffcc33',
      'stroke-width': 2,
      'circle-radius': 7,
      'circle-fill-color': '#ffcc33',
    },
    zIndex: 9999,
  })
  list.addLayer(drawLayerSearch)
  // 空间查询图层--飞行--单点
  treePiontSource = new VectorSource({
    wrapX: false,
  })
  treePiontLayer = new VectorLayer({
    source: treePiontSource,
    zIndex: 999,
  })
  list.addLayer(treePiontLayer)
  // 空间查询图层--飞行--线
  treeLineSource = new VectorSource({
    wrapX: false,
  })
  treeLineLayer = new VectorLayer({
    source: treeLineSource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 4,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(treeLineLayer)
  // 线要素的起点图层
  PipeXsource = new VectorSource({
    wrapX: false,
  })
  PipeXLayer = new VectorLayer({
    source: PipeXsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: [255, 165, 0, 1],
        }),
        stroke: new Stroke({
          color: [0, 255, 0, 1],
          width: 2.5,
        }),
      }),
      text: new Text({
        font: '15px A_QiChengINFO',
        text: '\u0028',
        scale: 2,
        // scale: list.getView().getZoom() / 5,
        fill: new Fill({
          color: 'rgba(255,165,0,1)',
        }),
      }),
    }),
  })
  list.addLayer(PipeXLayer)
  // 线要素的终点图层
  PipeYsource = new VectorSource({
    wrapX: false,
  })
  PipeYLayer = new VectorLayer({
    source: PipeYsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: [0, 255, 0, 1],
        }),
        stroke: new Stroke({
          color: [255, 165, 0, 1],
          width: 2.5,
        }),
      }),
      text: new Text({
        font: '15px A_QiChengINFO  ',
        text: '\u0029',
        scale: 2,
        fill: new Fill({
          color: 'rgba(255,165,0,1)',
        }),
      }),
    }),
  })
  list.addLayer(PipeYLayer)
  // 线要素缓冲区图层(单线)
  PipeLinesource = new VectorSource({
    wrapX: false,
  })
  PipeLineLayer = new VectorLayer({
    source: PipeLinesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      // stroke: new Stroke({
      //   color: [0, 0, 0, 1],
      //   width: 5,
      // }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLineLayer)
  // 全部图层的显隐
  Pipesource = new VectorSource({
    wrapX: false,
  })
  PipeLayer = new VectorLayer({
    source: Pipesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 3,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLayer)
})

// 打开菜单的同时高亮勾选选中的图标
// 检测管理进度条
const jdt = ref(false)
const percentage = ref(0)
const timeStart = ref('进度条计时')
const openList = (e) => {
  let manageType = e.currentTarget.getAttribute('data-manage')
  if (manageType === 'JCGL') {
    JCGL_flag.value = true
    demo1.value5 = true
    XFGL_flag.value = false
    KJCX_flag.value = false
    // 控制开始时间默认当天往前一个月
    // 控制结束时间默认当天
    $(document).ready(function () {
      var time = new Date()
      var day = ('0' + time.getDate()).slice(-2)
      var month = ('0' + (time.getMonth() + 1)).slice(-2)
      var lastMonth = ('0' + time.getMonth()).slice(-2)
      var lastToday = time.getFullYear() + '-' + lastMonth + '-' + day
      $('#start_time_choose').val(lastToday)
      start_time_choose.value = $('#start_time_choose').val()
      // console.log('开始时间', end_time_choose.value)
      var today = time.getFullYear() + '-' + month + '-' + day
      $('#end_time_choose').val(today)
      end_time_choose.value = $('#end_time_choose').val()
      // console.log('结束时间', end_time_choose.value)
      getInfo()
    })
  }
  if (manageType === 'XFGL') {
    XFGL_flag.value = true
    demo1.value9 = true
    JCGL_flag.value = false
    KJCX_flag.value = false
    // 进度条显示
    jdt.value = true
    getXFInfo().then((res) => {
      // 进度条值
      percentage.value = 100
      // 分割线
      console.log(res.data)
      if (res.data) {
        tableDataXF.value = res.data
        const a6 = res.data
        const a7 = []
        a6.forEach((value) => {
          a7.push([
            [value.testingStartX, value.testingStartY],
            [value.testingEndX, value.testingEndY],
          ])
        })
        console.log('管线数组', a7)
        pipeArr.value = a7
        jdt.value = false
        loading.value = false
      } else {
        console.log('没有权限数据')
        jdt.value = false
        loading.value = false
      }
    })
  }
  if (manageType === 'KJCX') {
    XFGL_flag.value = false
    JCGL_flag.value = false
    KJCX_flag.value = true
    demo3.value1 = true
  }
}
// 进度条方法
const increase = () => {
  timeStart.value = setInterval(() => {
    if (percentage.value < 95) {
      percentage.value += 5
    }
    if (percentage.value > 100) {
      percentage.value = 100
    }
  }, 30)
}
const increaseend = () => {
  percentage.value = 100
  clearInterval(timeStart.value)
  jdt.value = false
}
watch(jdt.value, (value, newValue) => {
  console.log(value + '----newValue----' + newValue)
  if (value) {
    that.increase()
  } else {
    that.increaseend()
  }
})
// 分割线
// 空间查询
const demo3 = reactive({
  value1: false, //弹窗
})
const value = ref('')
const options = [
  {
    value: 'Polygon',
    label: 'Polygon',
  },
  {
    value: 'handDraw',
    label: 'handDraw',
  },
  {
    value: 'None',
    label: '清空交互',
  },
]
const choose = ref('')
// 空间查询选择切换
const drawChange = (val) => {
  choose.value = val
  console.log(choose.value)
  delSearch() //先清空再添加新的
  addInteraction()
}
// 空间查询清空交互
const delSearch = () => {
  list.removeInteraction(drawSearch)
  drawSourceSearch.clear()
}
// 空间查询添加画笔交互
const addInteraction = () => {
  if (choose.value !== 'None') {
    if (choose.value == 'handDraw') {
      delSearch()
      drawSearch = new Draw({
        source: drawSourceSearch,
        type: 'Polygon',
        freehand: true,
      })
    } else {
      delSearch()
      drawSearch = new Draw({
        source: drawSourceSearch,
        type: 'Polygon',
      })
    }
    list.addInteraction(drawSearch)
  } else {
    // 清空交互
    list.removeInteraction(drawSearch)
    drawSourceSearch.clear()
  }
}
// 空间查询提交坐标组进行查询
let tableDataTJXX
const data = ref([]) //树形控件定义
let defaultProps = {
  children: 'children',
  label: 'label',
}

const submitSearch = () => {
  const featuresSearch = drawLayerSearch.getSource().getFeatures()
  const coordinates = featuresSearch[0].getGeometry().getCoordinates()
  const type = featuresSearch[0].getGeometry().getType()
  // console.log('坐标组查询', type, coordinates[0])
  const a10 = coordinates[0]
  const a11 = []
  for (let i = 0; i < a10.length; i++) {
    const obj = { x: a10[i][0], y: a10[i][1] }
    a11.push(obj)
  }
  // console.log('空间查询数组', a11)
  // const params = [
  //   {
  //     x: 26558.791350168436,
  //     y: 74921.18460379374,
  //   },
  // ]

  const params = a11
  getSpatialInfo(params).then((res) => {
    // console.log(res.data)
    // 空间查询--侧边栏aside--tree树形控件
    const a12 = res.data
    const a14 = []
    for (let i = 0; i < a12.length; i++) {
      const a15 = []
      const a16 = a12[i].featIds
      for (let i = 0; i < a16.length; i++) {
        const obj = { label: a16[i].featId }
        a15.push(obj)
      }
      // console.log('树形控件子级', a15)
      const obj = { label: a12[i].type, children: a15 }
      a14.push(obj)
    }
    // console.log('树形控件数组', a14)
    data.value = [
      {
        label: '查询结果',
        // children: [
        //   {
        //     label: '雨水管',
        //     children: [
        //       {
        //         label: '要素编码',
        //       },
        //     ],
        //   },
        // ],
        children: a14,
      },
    ]
    // 空间查询--mian栏--统计信息
    // tableDataTJXX = [
    //   {
    //     type: '雨水井',
    //     count: '580',
    //   },
    // ]
    tableDataTJXX = res.data

    const a13 = []
    for (let i = 0; i < a12.length; i++) {
      const obj = { value: a12[i].count, name: a12[i].type }
      a13.push(obj)
    }
    // console.log('echart数组', a13)
    // 空间查询--mian栏--统计图
    echart(a13)
  })
  list.removeInteraction(drawSearch) //清除交互
}
const tableDataXX = ref([])
const startX = ref()
const startY = ref()
const endX = ref()
const endY = ref()
// const lineArr = []
const lineArr = ref([])
const test = ref([])
const dataTree = ref()
// 树形控件点击事件--点击后飞行并显示样式
const handleNodeClick = (data) => {
  // console.log(data)
  delSearch()
  const treeArr = toRaw(data)
  // console.log('树点击', treeArr)
  if (treeArr.label.length < 8) {
    // console.log('没有点击要素编码不飞行')
  } else {
    if (treeArr.label.length > 14) {
      // console.log('飞行到线', treeArr.label)
      getPipeInfo(treeArr.label).then((res) => {
        // console.log(res)
        const arr = res.data[0]
        dataTree.value = arr
        getPipePointInfo(arr.startId).then((res) => {
          // console.log('线起点', res.data[0].x, res.data[0].y)
          startX.value = res.data[0].x
          startY.value = res.data[0].y
          // const obj = { startX: res.data[0].x, startY: res.data[0].y }
          lineArr.value.push([startX.value, startY.value])
        })
        getPipePointInfo(arr.endId).then((res) => {
          // console.log('线终点', res.data[0].x, res.data[0].y)
          endX.value = res.data[0].x
          endY.value = res.data[0].y
          // const obj = { endX: res.data[0].x, endY: res.data[0].y }
          lineArr.value.push([endX.value, endY.value])
          test.value.push([endX.value, endY.value])
        })

        // 空间查询--mian栏--详细信息
        tableDataXX.value = [
          {
            date: '起点要素编码',
            name: arr.startId,
          },
          {
            date: '终点要素编码',
            name: arr.endId,
          },
          {
            date: '材质',
            name: arr.material,
          },
          {
            date: '口径',
            name: arr.caliber,
          },
          {
            date: '规格',
            name: arr.spec,
          },
          {
            date: '起点埋深',
            name: arr.startBurialDepth,
          },
          {
            date: '终点埋深',
            name: arr.endBurialDepth,
          },
          {
            date: '起点内底标高',
            name: arr.startInvertElevation,
          },
          {
            date: '终点内底标高',
            name: arr.endInvertElevation,
          },
          {
            date: '管网类型',
            name: arr.pipeType,
          },
          {
            date: '探测位置',
            name: arr.location,
          },
          {
            date: '探测单位',
            name: arr.probeUnit,
          },
          {
            date: '探测日期',
            name: arr.probeDate,
          },
          {
            date: '归属',
            name: arr.ascription,
          },
          {
            date: '埋设方式',
            name: arr.burialType,
          },
          {
            date: '流向',
            name: arr.flowDirection,
          },
          {
            date: '建造年代',
            name: arr.buildYear,
          },
          {
            date: '是否有压',
            name: arr.isUnderPressure,
          },
          {
            date: '备注',
            name: arr.remark,
          },
          {
            date: '标识',
            name: arr.tag,
          },
        ]
      })
      watch(test.value, () => {
        const a = toRaw(dataTree.value)
        console.log('飞行线坐标', toRaw(lineArr.value))
        const a18 = toRaw(lineArr.value)[0]
        const a19 = toRaw(lineArr.value)[1]
        treeLineFeature = new Feature({
          geometry: new LineString([a18, a19]),
          attributes: [[a.startId], [a.endId]],
        })
        treeLineSource.addFeature(treeLineFeature)
        const x = toRaw(lineArr.value)[0][0] + 50
        const y = toRaw(lineArr.value)[0][1]
        list.getView().animate({
          center: [x, y],
          zoom: 10,
        })
      })
    } else {
      // console.log('飞行到点', treeArr.label)
      getPipePointInfo(treeArr.label).then((res) => {
        const arr = res.data[0]
        console.log(arr)
        // 空间查询--mian栏--详细信息
        tableDataXX.value = [
          {
            date: '要素编码',
            name: arr.featId,
          },
          {
            date: '类别名称',
            name: arr.type,
          },
          {
            date: '地面标高',
            name: arr.groundElevation,
          },
          {
            date: '口径',
            name: arr.caliber,
          },
          {
            date: '井深',
            name: arr.manholeDepth,
          },
          {
            date: '埋深',
            name: arr.burialDepth,
          },
          {
            date: '规格',
            name: arr.spec,
          },
          {
            date: '井盖材质',
            name: arr.manholeCoverMaterial,
          },
          {
            date: '井盖形状',
            name: arr.manholeCoverShape,
          },
          {
            date: '井盖尺寸',
            name: arr.manholeCoverSize,
          },
          {
            date: '探测单位',
            name: arr.probeUnit,
          },
          {
            date: '探测日期',
            name: arr.probeDate,
          },
          {
            date: '探测位置',
            name: arr.location,
          },
          {
            date: '归属',
            name: arr.ascription,
          },
          {
            date: '备注',
            name: arr.remark,
          },
          {
            date: '标识',
            name: arr.tag,
          },
        ]

        treePiontFeature = new Feature({
          geometry: new Point([arr.x, arr.y]),
        })
        if (treePiontFeature.getGeometry() != null) {
          treePiontSource.clear()
        }
        treePiontSource.addFeature(treePiontFeature)
        treePiontFeature.setStyle(function (resolution) {
          //监听分辨率跟随地图缩放
          return [
            new Style({
              image: new Icon({
                anchor: [0.5, 1.2], //锚点
                opacity: 1,
                scale: list.getView().getZoom() / 22,
                src: require('/vue3Ol/images/mark.png'),
              }),
            }),
          ]
        })
        // 飞行
        list.getView().animate({
          center: [arr.x + 50, arr.y],
          zoom: 10,
        })
      })
    }
  }
}

// 空间查询--mian栏--统计图
const echart = (a13) => {
  let myChart = echarts.init(document.getElementById('myChart123'))
  // 绘制图表
  myChart.setOption({
    // title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center',
    // },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        left: '0%',
        center: ['50%', '55%'],
        radius: '80%',
        // data: [
        //   { value: 484, name: '雨水管' },
        //   { value: 1048, name: '污水排放口' },
        // ],
        data: a13,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
  window.onresize = function () {
    // 自适应大小
    myChart.resize()
  }
}
// 折叠检测管理菜单--未实现
const tableFoldable = () => {}
// 收集时间内所有点线的坐标组
const pipeArr = ref(null)
// 检测管理获取时间
const addStart = () => {
  // console.log('开始时间', $('#start_time_choose').val())
  start_time_choose.value = $('#start_time_choose').val()
}
const addEnd = () => {
  // console.log('结束时间', $('#end_time_choose').val())
  end_time_choose.value = $('#end_time_choose').val()
}

// 检测分页--获取页数
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  console.log(tablePage.currentPage, tablePage.pageSize)
  getList()
}
// 检测分页--请求
const getList = () => {
  getJCGLInfo(
    tablePage.currentPage,
    tablePage.pageSize,
    defectLevel.value,
    start_time_choose.value,
    end_time_choose.value
  ).then((res) => {
    console.log(res.data.list)
    tableData.value = res.data.list
    tablePage.totalResult = res.data.total
  })
}
// 检测搜索按钮
const getInfo = () => {
  console.log(
    tablePage.currentPage,
    tablePage.pageSize,
    defectLevel.value,
    start_time_choose.value,
    end_time_choose.value,
    demo1.value300
  )
  // 进度条显示
  jdt.value = true
  loadingJC.value = true
  getJCGLSearch(start_time_choose.value, end_time_choose.value).then((res) => {
    // 进度条值
    percentage.value = 100
    console.log(res)
    if (res.code == 200) {
      console.log(res.data.list)
      tableData.value = res.data.list
      tablePage.totalResult = res.data.total
      jdt.value = false
      loadingJC.value = false
    } else {
      console.log(res)
    }
  })
  getJCWhole(
    start_time_choose.value,
    end_time_choose.value,
    defectLevel.value
  ).then((res) => {
    if (res.code == 200) {
      const a21 = res.data
      const a22 = []
      a21.forEach((value) => {
        a22.push([
          [value.testingStartX, value.testingStartY],
          [value.testingEndX, value.testingEndY],
        ])
      })
      console.log('检测全部图层', a22)
      pipeArr.value = a22
    } else {
      console.log(res)
    }
  })
}
// 修复搜索
const getInfoXF = () => {
  console.log(demo1.value400)
  getXFSearch(demo1.value400).then((res) => {
    console.log(res.data)
    tableDataXF.value = res.data
    const a3 = res.data
    const a4 = []
    a3.forEach((value) => {
      a4.push([
        [value.testingStartX, value.testingStartY],
        [value.testingEndX, value.testingEndY],
      ])
    })
    console.log('管线数组', a4)
    pipeArr.value = a4
  })
}
// 点击取到每行的数据
const xTable = ref()
const testingStartX = ref()
const testingStartY = ref()
const testingEndX = ref()
const testingEndY = ref()
const baseUrl = ref('https://ks.qichenginfo.com/JianCeData')
const region = ref()
const testingCompany2 = ref()
const eid = ref()
const testingPhoto = ref()
const testingVideo = ref()
const testingReport = ref()
const testPhotoUrl = ref()
const testPhoto = ref()
const testVideoUrl = ref()
const testVideo = ref()
const testReportUrl = ref()
// 修复地址
const XFurl = ref()
const XFpic = ref()
const XFreport = ref()
const XFvideo = ref()
const XFeid = ref()
// 点击单行的操作(飞行与显示点线)
const handleRowClick = (rowIndex) => {
  const $table = xTable.value
  // console.log($table.getCurrentRecord())
  const record = $table.getCurrentRecord()
  const Data = JSON.parse(JSON.stringify(record))
  console.log('单击飞行', Data)
  if (Data) {
    // 坐标
    testingStartX.value = Data.testingStartX
    testingStartY.value = Data.testingStartY
    testingEndX.value = Data.testingEndX
    testingEndY.value = Data.testingEndY
    // 修复
    XFurl.value = Data.path //检测共用
    XFpic.value = Data.handlePhoto
    XFreport.value = Data.handleReport
    XFvideo.value = Data.handleVideo
    XFeid.value = Data.eid //检测共用
    // 检测
    testPhoto.value = Data.testingPhoto
    testVideo.value = Data.testingVideo
    testReportUrl.value = Data.testingReport

    // 加载起点要素
    PipeXFeature = new Feature({
      geometry: new Point([testingStartX.value, testingStartY.value]),
    })
    if (PipeXFeature.getGeometry() != null) {
      PipeXsource.clear()
    }
    // PipeXsource.addFeature(PipeXFeature)
    // 加载终点要素
    PipeYFeature = new Feature({
      geometry: new Point([testingEndX.value, testingEndY.value]),
    })
    if (PipeYFeature.getGeometry() != null) {
      PipeYsource.clear()
    }
    // PipeYsource.addFeature(PipeYFeature)
    // 加载缓冲区--只有4326可以使用turf
    const arrKSZB = [
      [testingStartX.value, testingStartY.value],
      [testingEndX.value, testingEndY.value],
    ]
    let arr4326 = arrKSZB.map((item) => {
      return transform(item, 'EPSG:KSZB', 'EPSG:4326')
    })
    const lineString = turf.lineString(arr4326)
    // console.log('缓冲区', lineString)
    // 0.1米=0.00006214 英里
    // 0.5米=0.0003107 英里
    const buffer = turf.buffer(lineString, 0.0003107, { units: 'miles' })
    let buffered = buffer.geometry.coordinates[0]
    let testarr = buffered.map((item) => {
      return transform(item, 'EPSG:4326', 'EPSG:KSZB')
    })
    // console.log(testarr)
    PipeLineFeature = new Feature({
      type: 'Polygon',
      geometry: new Polygon([testarr]),
    })
    if (PipeLineFeature.getGeometry() != null) {
      PipeLinesource.clear()
    }
    // PipeLinesource.addFeature(PipeLineFeature)
    // 直接跳转镜头方法
    console.log([Data.startId, Data.endId])
    treeLineFeature = new Feature({
      geometry: new LineString([
        [testingStartX.value, testingStartY.value],
        [testingEndX.value, testingEndY.value],
      ]),
      attributes: [[Data.startId], [Data.endId]],
      attributes2: [Data.featId],
      PointAX: [testingStartX.value, testingStartY.value],
      PointX: [testingEndX.value, testingEndY.value],
    })

    treeLineSource.addFeature(treeLineFeature)
    list.getView().setZoom(9)

    list.getView().setCenter([testingStartX.value + 50, testingStartY.value])
  } else {
    console.log('暂无数据')
  }
}

// featID关键字查询(检测)
const searchID = (value) => {
  getInfo()
}
// featID关键字查询(修复)
const searchIDXF = (value) => {
  getInfoXF()
}
// 缺陷等级全选反选
const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
  const alldata = JSON.parse(JSON.stringify(checkedCities.value))
  // console.log('打印全选', alldata)
  const str = alldata.toString() //把arr数组利用toString()转换为字符串
  // console.log('处理成字符串', str)
  const c = str.replace(/\级|\>|\/|\?]/g, '')
  const b = c.split(',')
  const d = "'" + b.join("','") + "'"
  defectLevel.value = d.toString()
  // console.log('打印选择', defectLevel.value)
}
const handleCheckedCitiesChange = (value) => {
  // console.log('打印选择', value)
  const checkedCount = value.length
  const str2 = value.toString()
  const c2 = str2.replace(/\级|\>|\/|\?]/g, '')
  const b2 = c2.split(',')
  const d2 = "'" + b2.join("','") + "'"
  defectLevel.value = d2.toString()
  // console.log('打印选择', defectLevel.value)
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
//展开图片(检测)
const openPic = () => {
  demo1.value6 = true
  if (testPhoto.value) {
    testPhotoUrl.value = XFurl.value + XFeid.value + '/' + testPhoto.value
    if (testPhoto.value.includes('/') == false) {
      single.value = true
      poly.value = false
      testPhotoUrl.value = XFurl.value + XFeid.value + '/' + testPhoto.value
      console.log('单张图片', testPhoto.value)
    } else if (testPhoto.value.includes('/') == true) {
      originalUrl.value = XFurl.value + XFeid.value + '/'
      single.value = false
      const a2 = testPhoto.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { id: i, pic: a2[i], originalUrl: originalUrl.value }
        a22.push(obj)
      }
      images.value = a22
      console.log('多张图片', testPhoto.value)
      poly.value = true
    } else {
      testPhotoUrl.value = 'https://temp.im/200x200'
    }
    console.log('图片地址', testPhotoUrl.value)
  } else {
    console.log('未选中')
  }
}
// 展开报告(检测)
const openReport = () => {
  demo1.value7 = true
  if (testReportUrl.value) {
    testReportUrl.value = XFurl.value + XFeid.value + '/' + testReportUrl.value
    console.log('报告地址', testReportUrl.value)
  } else {
    console.log('未选中')
  }
}
// 展开视频(检测)
const openVideo = () => {
  demo1.value8 = true
  if (testVideo.value) {
    if (testVideoUrl.value != undefined) {
      if (testVideo.value.includes('/') == false) {
        originalUrl.value = XFurl.value + XFeid.value + '/'
        const before = testVideo.value.split('.')[0]
        const mp4 = before + '.mp4'
        testVideoUrl.value = originalUrl.value + mp4
        console.log('单个视频', testVideo.value)
      } else if (testVideo.value.includes('/') == true) {
        originalUrl.value = XFurl.value + XFeid.value + '/'
        const a2 = testVideo.value.split('/')
        const a22 = []
        for (let i = 0; i < a2.length; i++) {
          const obj = { value: a2[i], label: a2[i] }
          a22.push(obj)
        }
        movieOptions.value = a22
        // 默认加载第一个视频
        testVideoUrl.value = originalUrl.value + a2[0]
        console.log('多个视频', movieOptions.value)
      } else {
        console.log('无权限视频')
      }
    } else {
      testVideoUrl.value = 'https://temp.im/200x200'
      console.log('暂无视频')
    }
  } else {
    console.log('未选中')
  }
}
//展开图片(修复)--挂轮播图
const single = ref(true)
const poly = ref(false)
const originalUrl = ref()
const images = ref([])
const openPicXF = () => {
  demo1.value12 = true
  if (XFpic.value) {
    if (XFpic.value.includes('/') == false) {
      single.value = true
      poly.value = false
      testPhotoUrl.value = XFurl.value + XFeid.value + '/' + XFpic.value
      console.log('单张图片', XFpic.value)
    } else if (XFpic.value.includes('/') == true) {
      originalUrl.value = XFurl.value + XFeid.value + '/'
      single.value = false
      const a2 = XFpic.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { id: i, pic: a2[i], originalUrl: originalUrl.value }
        a22.push(obj)
      }
      images.value = a22
      console.log('多张图片', XFpic.value)
      poly.value = true
    } else {
      testPhotoUrl.value = 'https://temp.im/200x200'
    }
  } else {
    console.log('未选中')
  }
}
//展开报告(修复)
const openReportXF = () => {
  demo1.value11 = true
  if (XFreport.value) {
    testReportUrl.value = XFurl.value + XFeid.value + '/' + XFreport.value
    console.log(testReportUrl.value)
  } else {
    console.log('未选中')
  }
}
//展开视频(修复)
const movieValue = ref('')
const movieOptions = ref([])
const openVideoXF = () => {
  demo1.value10 = true
  if (XFvideo.value) {
    if (XFvideo.value.includes('/') == false) {
      testVideoUrl.value = XFurl.value + XFeid.value + '/' + XFvideo.value
      console.log('单个视频', XFvideo.value)
    } else if (XFvideo.value.includes('/') == true) {
      originalUrl.value = XFurl.value + XFeid.value + '/'
      const a2 = XFvideo.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { value: a2[i], label: a2[i] }
        a22.push(obj)
      }
      movieOptions.value = a22
      // 默认加载第一个视频
      testVideoUrl.value = originalUrl.value + a2[0]
      console.log('多个视频', movieOptions.value)
    } else {
      console.log('无权限视频')
    }
    console.log(testVideoUrl.value)
  } else {
    console.log('未选中')
  }
}
// 多个视频选择栏
const movieChange = (val) => {
  console.log(val)
  testVideoUrl.value = originalUrl.value + val
}
// 图层开关信息(检测)
const value1 = ref(false)
// 显隐图层开关
const switchMap = () => {
  if (value1.value == true) {
    const a5 = pipeArr.value
    console.log('开', a5)
    for (let i = 0; i < a5.length; i++) {
      PipeFeature = new Feature({
        geometry: new LineString([a5[i][0], a5[i][1]]),
      })
      Pipesource.addFeature(PipeFeature)
    }
  } else if (value1.value == false) {
    console.log('关')
    Pipesource.clear()
  } else {
    console.log('报错')
  }
}
// 修复开关
const value2 = ref(false)
const switchMapXF = () => {
  if (value2.value == true) {
    const a8 = pipeArr.value
    const a9 = toRaw(a8)
    console.log('开', a9)
    for (let i = 0; i < a9.length; i++) {
      PipeFeature = new Feature({
        geometry: new LineString([a9[i][0], a9[i][1]]),
      })
      Pipesource.addFeature(PipeFeature)
    }
  } else if (value2.value == false) {
    console.log('关')
    Pipesource.clear()
  } else {
    console.log('报错')
  }
}
</script>
<style lang="less" scoped>
//

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
}
// 图片弹窗头
.picPop {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}
// 管理弹窗头
.vxe_box {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100%
      no-repeat !important;
    // background: #000 !important;
  }
  :deep(.vxe-modal--header-right) {
    color: #fff;
    transform: translateY(5%);
    font-size: 18px;
  }
}
.JC_title span {
  font-size: 20px;
}
// 检测弹窗选项
.first_line {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.first_line span {
  margin-right: 20px;
}
.second_line {
  font-size: 18px;
  margin-top: 7px;
  display: flex;
  justify-content: space-around;
  padding: 0 50px;
}
.third_line {
  font-size: 18px;
  float: right;
  width: 950px;
}
.third_line_a {
  margin-left: 675px;
}
.third_line span {
  margin-right: 30px;
}
.el-span {
  display: inline-block;
  margin-right: 30px;
}
.baffle {
  clear: both;
  zoom: 1;
}
// 修复
.XF_first_line {
  float: right;
  width: 950px; //修改进度条宽度
}
.XF_first_line_a {
  margin-left: 300px;
}
.XF_first_line span {
  margin-right: 20px;
}
.XF_second_line {
  display: inline-block;
  margin-right: 30px;
}
// 修改修复input框长度
.XF_second {
  :deep(.vxe-input) {
    width: 220px;
  }
}
.chart {
  height: 400px;
}
.vxe-button.type--button {
  float: right;
}
// 折叠按钮
.foldable_btn {
  float: right;
  margin-top: 0.5%;
}
/* 
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.PopTable {
  position: absolute;
  overflow: hidden;
  left: -400%;
  top: 25%;
  width: 1000px;
  z-index: 99;
}
.start_time {
  position: absolute;
  color: black;
  left: -400%;
  top: 10%;
  z-index: 9999;
  height: 50px;
  line-height: 50px;
}

.end_time {
  position: absolute;
  color: black;
  left: -335%;
  top: 10%;
  z-index: 9999;
  height: 50px;
  line-height: 50px;
}

.time_search {
  position: absolute;
  left: -295%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.time_search_X {
  position: absolute;
  left: -265%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.time_search_XX {
  position: absolute;
  left: -235%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.photo {
  position: absolute;
  left: -265%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 85px;
  height: 30px;
  margin-left: 96px;
}
.report {
  position: absolute;
  left: -235%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 85px;
  height: 30px;
  margin-left: 96px;
}
.video {
  position: absolute;
  left: -205%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 85px;
  height: 30px;
  margin-left: 96px;
}
.list_title {
  margin-top: 2%;
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #80eeff;
}
.map_list {
  display: flex;
  font-size: 13px;
  text-align: center;
  .img_map_box {
    position: relative;
    height: 40px;
    width: 40px;
    border: 1px solid #80eeff;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 10px;
    .map_active {
      position: absolute;
      top: 38px;
      width: 100%;
      height: 16px;
      background-color: rgb(7, 247, 93);
      opacity: 0.85;
      img {
        vertical-align: baseline;
      }
    }
  }
  .img_map_box > img {
    width: 100%;
    height: 100%;
  }
}
.map_list > div {
  margin-top: 7px;
}
</style>
